import {
  ActivityIndicator,
  Dimensions,
  Platform,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { ProfileScreenProps } from "../../types/NavigationTypes";
import { useCallback, useEffect, useState } from "react";
import * as Tabs from "react-native-collapsible-tab-view";
import apiService from "../../services/ApiServices";
import { ProfileHeader } from "../../components/ProfileHeader";
import BackButton from "../../components/BackButton";
import ProfileCartoonListView from "../../components/ProfileCartoonListView";

const ProfilePipeListView = Platform.select({
  ios: require('../../components/ProfilePipeListView.ios').default,
  android: require('../../components/ProfilePipeListView.android').default,
});

const HEADER_HEIGHT = 220;
const ProfileScreen: React.FC<ProfileScreenProps> = ({ navigation, route }) => {
  const { uid } = route.params;

  const [userInfo, setUserInfo] = useState<any>(null);

  useEffect(() => {
    getUserInfo();
  }, []);

  useEffect(() => {
    navigation.setOptions({
      title: "FlowGPT",
      headerTitleStyle: { fontSize: 18, color: "#3BC859", fontWeight: "bold" },
      headerTitleAlign: "center",
      headerLeft: () => {
        return <BackButton onPress={() => navigation.goBack()} />;
      }
    });
  }, [navigation]);

  const getUserInfo = async () => {
    const result = await apiService.getUserInfo(uid);
    setUserInfo(result?.data);
  };

  const renderTabItem = useCallback(
    (props: Tabs.MaterialTabItemProps<string>) => (
      <Tabs.MaterialTabItem
        {...props}
        activeColor="#3BC859"
        inactiveColor="grey"
        pressColor="rgba(255, 255, 255, 0)"
        pressOpacity={1}
      />
    ),
    []
  );

  const renderTabBar = useCallback(
    (props: Tabs.TabBarProps<string>) => (
      <Tabs.MaterialTabBar
        {...props}
        indicatorStyle={styles.indicator}
        style={styles.tabbar}
        labelStyle={styles.label}
        tabStyle={styles.tabStyle}
        activeColor="#3BC859"
        TabItemComponent={renderTabItem}
        width={120}
        contentContainerStyle={{
          marginLeft: (Dimensions.get("window").width - 120) / 2,
        }}
      />
    ),
    []
  );

  return userInfo === null ? (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" color="#3BC859" />
    </View>
  ) : (
    <Tabs.Container
      headerContainerStyle={{
        backgroundColor: "white",
        shadowColor: "transparent",
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 0,
        shadowRadius: 0,
        elevation: 0,
      }}
      renderHeader={() => <ProfileHeader user={userInfo} height={HEADER_HEIGHT} />}
      headerHeight={HEADER_HEIGHT}
      renderTabBar={renderTabBar}
    >
      <Tabs.Tab name="内容">
       <ProfilePipeListView uid={uid}/>
      </Tabs.Tab>
      <Tabs.Tab name="角色">
       <ProfileCartoonListView uid={uid}/>
      </Tabs.Tab>
    </Tabs.Container>
  );
};

const styles = StyleSheet.create({
  box: {
    height: 300,
    width: "100%",
  },
  boxA: {
    backgroundColor: "white",
  },
  boxB: {
    backgroundColor: "#D8D8D8",
  },
  header: {
    height: HEADER_HEIGHT,
    width: "100%",
    backgroundColor: "red",
  },
  tabbar: {
    width: "100%",
    backgroundColor: "white",
    elevation: 0,
    borderBottomWidth: 0.5,
    borderBottomColor: "rgba(0,0,0,0.05)",
  },
  indicator: {
    backgroundColor: "#3BC859",
    height: 2,
  },
  label: {
    fontWeight: "400",
    color: "grey",
    fontSize: 15,
  },
  tabStyle: {
    width: "auto",
    marginVertical: -3,
  },
  emptyTabStyle: {
    width: "100%",
  },
  item_view: {
    width: "100%",
    height: 200,
    borderRadius: 10,
    backgroundColor: "purple",
    alignItems: "center",
    justifyContent: "center",
  },
  item_text: {
    color: "white",
    fontSize: 30,
  },
});

export default ProfileScreen;
